<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/xueli.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header-container">  
        <div class="header">
            <img src="http://www.edu2act.cn/static/images/logo.png" alt="">
            <nav>
                <a href="#">首页</a>
                <a href="#">同步课</a>
                <a href="#">课程</a>
                <a href="#">文章</a>
            </nav>
            <input type="text" placeholder="搜索">
            <img class="avatar" src="http://www.edu2act.cn/static/images/logo.png" alt="">
        </div>
    </div>
    <!-- 内容 -->
    <div class="content">
        <div class="content-left">
            <img src="http://www.edu2act.cn/static/images/logo.png" alt="">
            <h2>用户名</h2>
            <ul>
                <li>
                    <span>图标</span>
                    <span>同步课</span>
                    <span>+</span>
                </li>
                <li>
                    <span>图标</span>
                    <span>同步课</span>
                    <span>+</span>
                </li>
                <li>
                    <span>图标</span>
                    <span>同步课</span>
                    <span>+</span>
                </li>
                <li>
                    <span>图标</span>
                    <span>同步课</span>
                    <span>+</span>
                </li>
            </ul>
        </div>
        <div class="content-right">
            <ul>
                <li style="display: flex;padding: 20px 0;">
                    <img src="http://www.edu2act.cn/static/images/logo.png" alt="">
                    <div style="margin-left: 50px;">
                        <h3>课程名</h3>
                        <p>课程简介</p>
                    </div>
                    <span style="margin-left: auto;">+</span>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>